<template>
    <div class="my-video-content-container">
      <video class="my-video-content" autoplay id="my-video" controls preload="auto"></video>
    </div>
  </template>
  
<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
import WsPlayer from './WsPlayer'
export default defineComponent({
    name: 'VideoPlayer',
    props: {
        url:{
            type: String,
            default: '',
        },
    },
    setup(props,ctx){
        const player: any = ref({})  
        onMounted(() => {
        player.value = new WsPlayer("my-video", props.url);
        player.value.open();
        })

        onUnmounted(() => {
        if(player.value && player.value.close) {
            player.value.close()
            player.value = null
        }
        })

    }
})
</script>

<style>
    .my-video-content-container {
        width: 100%;
        height: 100%;
    }
 
    .my-video-content {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
</style>
  